{extend name="base" /}
{block name="css"}
<style>
    .user-info-head {
        width: 110px;
        height: 110px;
        position: relative;
        display: inline-block;
        border-radius: 50%;
        border: 2px solid #eee;
    }

    .user-info-head:hover:after {
        content: '\e624';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        color: #eee;
        background: rgba(0, 0, 0, 0.5);
        font-family: layui-icon;
        font-size: 28px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        cursor: pointer;
        line-height: 110px;
        border-radius: 50%;
    }

    .user-info-head img {
        width: 110px;
        height: 110px;
        border-radius: 50%;
    }

    .info-list-item {
        position: relative;
        padding-bottom: 8px;
    }

    .info-list-item > .layui-icon {
        position: absolute;
    }

    .info-list-item > p {
        padding-left: 30px;
    }

    .dash {
        border-bottom: 1px dashed #ccc;
        margin: 15px 0;
    }

    .bd-list-item {
        padding: 14px 0;
        border-bottom: 1px solid #e8e8e8;
        position: relative;
    }

    .bd-list-item .bd-list-item-img {
        width: 48px;
        height: 48px;
        line-height: 48px;
        margin-right: 12px;
        display: inline-block;
        vertical-align: middle;
    }

    .bd-list-item .bd-list-item-content {
        display: inline-block;
        vertical-align: middle;
    }

    .bd-list-item .bd-list-item-lable {
        margin-bottom: 4px;
        color: #333;
    }

    .bd-list-item .bd-list-item-oper {
        position: absolute;
        right: 0;
        top: 50%;
        text-decoration: none !important;
        cursor: pointer;
        transform: translateY(-50%);
    }

    .user-info-form .layui-form-item {
        margin-bottom: 25px;
    }
    /** 应用列表样式 */
    .application-list-item {
        background-color: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        cursor: pointer;
        transition: all .2s;
    }

    .application-list-item:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    }

    .application-list-item .application-list-item-header {
        padding: 16px 12px 0 12px;
    }

    .application-list-item .application-list-item-header .head {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .application-list-item .application-list-item-header > h2 {
        color: #333;
        font-size: 18px;
        display: inline-block;
    }

    .application-list-item .application-list-item-body {
        padding: 5px 5px 0px 30px;
        font-size: 0;
    }

    .application-list-item .application-list-item-body .text-num-item {
        display: inline-block;
        width: 100%;
        font-size: 26px;
        color: #666;
    }

    .application-list-item .application-list-item-body .text-num-item .text-num-item-title {
        font-size: 12px;
        color: #999;
        margin-bottom: 2px;
    }

    .application-list-item .application-list-item-body .text-num-item small {
        font-size: 16px;
    }

    .application-list-item .application-list-item-tool {
        font-size: 0;
        background-color: #FAFAFA;
        border-top: 1px solid #e8e8e8;
        padding: 10px 0 5px 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .application-list-item .application-list-item-tool .application-list-item-tool-item {
        display: inline-block;
        width: 25%;
        font-size: 18px;
        text-align: center;
        color: #999;
        border-right: 1px solid #e8e8e8;
        box-sizing: border-box;
        cursor: pointer;
    }

    .application-list-item .application-list-item-tool .application-list-item-tool-item:last-child {
        border-right: none;
    }

    /** // 应用列表样式结束 */

</style>
{/block}
{block name="body"}
<!-- 左 -->
<div class="layui-col-sm12 layui-col-md3">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 25px;">
            <div class="text-center layui-text">
                <!--div class="user-info-head" id="imgHead">
                    <img src="{$data.avatar|default='/static/img/no_image_100x100.jpg'}" width="100" height="100"/>
                </div-->
                {if $data.name}<h2 style="padding-top: 20px;">{$data.name}</h2>{/if}
                {if $data.sname}<p style="padding-top: 8px;">{$data.sname}</p>{/if}
            </div>
            <div class="layui-text" style="padding-top: 30px;">
                {foreach name="field" item="r"}
                {if $r.name != 'name' and $r.name !='sname' and $r.type != 'upload' and $r.type !='photo'}
                <div class="layui-form-item">
                    <label class="layui-form-label {if $r.is_required == '1'}layui-form-required{/if}">{$r.title}:</label>
                    <div class="layui-input-block">
                        <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                            {if $r.type == 'photo' || $r.type == 'upload'}
                            {:get_code_value($r,$data)}
                            {else}
                            <button class="layui-btn layui-btn-sm layui-btn-primary" >{:get_code_value($r,$data)}</button>
                            {/if}
                        </div>
                    </div>
                </div>
                {/if}
                {/foreach}
            </div>
            <!--div class="dash"></div>
            <h3>标签</h3>
            <div class="layui-badge-list" style="padding-top: 6px;">
                <span class="layui-badge layui-bg-cyan">分类:{$data.classify_name}</span>
                <span class="layui-badge layui-bg-gray">来源:{$data.comefrom_name}</span>
                <span class="layui-badge layui-bg-green">状态:{$data.status_name}</span>
            </div>
            <div class="dash"></div>
            <h3>快捷操作</h3>
            <div class="layui-badge-list" style="padding-top: 6px;">
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn">增加</button>
                    <button type="button" class="layui-btn">编辑</button>
                    <button type="button" class="layui-btn">删除</button>
                </div>

            </div-->
        </div>
    </div>
</div>
<!-- 右 -->
<div class="layui-col-sm12 layui-col-md9">
    <div class="layui-card">
        <div class="layui-card-body">

            <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
                <ul class="layui-tab-title">
                    <li{if $show == 'customer'} class="layui-this"{/if}>客户信息</li>
                    <li{if $show == 'track'} class="layui-this"{/if}>回访记录</li>
                    <li{if $show == 'sales'} class="layui-this"{/if}>销售记录</li>
                    <li{if $show == 'contract'} class="layui-this"{/if}>合同管理</li>
                    <div class="layui-btn-group" style="float:right">
                        {if auth_url('crm/customer/edit')}
                        <a class="layui-btn ajax-iframe" href="{:url('crm/customer/edit',['id'=>$data['id']])}" data-width="80%" data-height="100%">修改客户</a>
                        {/if}
                        {if auth_url('crm/track/add')}
                        <a class="layui-btn ajax-iframe" href="{:url('crm/track/add',['customer_id'=>$data['id']])}" data-width="50%" data-height="100%">添加回访</a>
                        {/if}
                        {if auth_url('crm/sales/add')}
                        <a class="layui-btn ajax-iframe" href="{:url('crm/sales/add',['customer_id'=>$data['id']])}" data-width="50%" data-height="100%">添加销售</a>
                        {/if}
                        {if auth_url('crm/contract/add')}
                        <a class="layui-btn ajax-iframe" href="{:url('crm/contract/add',['customer_id'=>$data['id']])}" data-width="50%" data-height="100%">添加合同</a>
                        {/if}
                    </div>
                </ul>
                <div class="layui-tab-content">
                    <!--更需信息-->
                    <div class="layui-tab-item {if $show == 'customer'} layui-show{/if}">
                        
                        <fieldset class="layui-elem-field">
                            <legend>客服信息</legend>
                            <div class="layui-field-box">
                                {foreach name="data.crmuser" key="v" item="r"}
                                <div class="layui-col-md4">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{$r.type_name}：</label>
                                        <div class="layui-input-block">
                                            <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                                                <button class="layui-btn layui-btn-sm layui-btn-primary" >{$r.user_name}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {/foreach}
                            </div>
                        </fieldset>
                        <fieldset class="layui-elem-field">
                            <legend>图片资料</legend>
                            <div class="layui-field-box">
                                {foreach name="field" item="r"}
                                {if $r.type == 'upload' || $r.type =='photo'}
                                <div class="layui-col-md{$r.type=='photo'?'12':'3'}">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label {if $r.is_required == '1'}layui-form-required{/if}">{$r.title}:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                                                {:get_code_value($r,$data)}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {/if}
                                {/foreach}
                            </div>
                        </fieldset>
                    </div>
                    <!--回访-->
                    <div class="layui-tab-item {if $show == 'track'} layui-show{/if}">
                        <table id="tableTrack" lay-filter="tableTrack"></table>
                        <!-- 表格操作列 -->
                        <script type="text/html" id="tableEditTrack">
                            {if auth_url('crm/track/edit')}
                            <a href="{:url('crm/track/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="50%" data-height="100%">修改</a>
                            {/if}
                            {if auth_url('crm/track/del')}
                            <a href="{:url('crm/track/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
                            {/if}
                        </script>
                    </div>
                    <!--销售-->
                    <div class="layui-tab-item {if $show == 'sales'} layui-show{/if}">
                        <table id="tableOrder" lay-filter="tableOrder"></table>
                        <!-- 表格操作列 -->
                        <script type="text/html" id="tableEditOrder">
                            {if auth_url('crm/sales/edit')}
                            <a href="{:url('crm/sales/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="50%" data-height="100%">修改</a>
                            {/if}
                            {if auth_url('crm/sales/del')}
                            <a href="{:url('crm/sales/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
                            {/if}
                        </script>
                    </div>
                    <!--合同-->
                    <div class="layui-tab-item {if $show == 'contract'} layui-show{/if}">
                        <table id="tableContract" lay-filter="tableContract"></table>
                        <!-- 表格操作列 -->
                        <script type="text/html" id="tableEditContract">
                            {if auth_url('crm/contract/verify')}
                            {{# if(d.status == '0'){ }}
                            <a href="{:url('crm/contract/verify')}?id={{d.id}}" class="layui-btn layui-btn-sm layui-btn-warm ajax-action">审核</a>
                            {{# } }}
                            {/if}
                            {if auth_url('crm/contract/edit')}
                            <a href="{:url('crm/contract/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="50%" data-height="100%">修改</a>
                            {/if}
                            {if auth_url('crm/contract/del')}
                            <a href="{:url('crm/contract/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
                            {/if}
                        </script>
                        <!-- 权限列 -->
                        <script type="text/html" id="downfile">
                            {{# if(d.file){}}
                            <a href="{{d.file}}" class="layui-btn layui-btn-warm" target="_blank">下载合同</a>
                            {{# }}}
                        </script>
                        <!-- 权限列 -->
                        <script type="text/html" id="time">
                            开始时间：<button class="layui-btn layui-btn-primary">{{d.start_time}}</button><br>
                            到期时间：<button class="layui-btn layui-btn-primary">{{d.end_time}}</button>
                        </script>
                        <!-- 合同图片 -->
                        <script type="text/html" id="photo">
                            <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                                <div class="paper-info-group-imgs" id="eDialogInfoImgs_hetong">
                                    {{#  layui.each(d.photo, function(index, item){ }}
                                    <img src="{{item}}" tb-img-circle tb-img height="80px">
                                    {{#  }); }}
                                </div>
                            </div>
                        </script>
                    </div>
                    <!--提醒-->
                    
                    
                </div>
            </div>

        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'dropdown'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var dropdown = layui.dropdown;
        
        // 渲染回访表格
        var insTb = table.render({
            elem: '#tableTrack',
            url: "{:url('crm/track/index_json',['customer_id'=>$data['id']])}",
            page: true,
            cols: [[
                {field: 'update_time', align: 'center', sort: true, title: '时间', width: 200},
                {field: 'user_name', align: 'center', sort: true, title: '用户'},
                {field: 'remark', align: 'left', sort: true, title: '详情'},
                {align: 'center', toolbar: '#tableEditTrack', title: '操作', minWidth: 200}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });
       
        // 渲染销售表格
        var insTb = table.render({
            elem: '#tableOrder',
            url: "{:url('crm/sales/index_json',['customer_id'=>$data['id']])}",
            page: true,
            cols: [[
                {field: 'update_time', align: 'center', sort: true, title: '时间', width: 200},
                {field: 'user_name', align: 'center', sort: true, title: '用户',},
                {field: 'price', align: 'center', sort: true, title: '金额',},
                {align: 'center', toolbar: '#tableEditOrder', title: '操作', minWidth: 200}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });
        
        // 渲染合同表格
        var insTb = table.render({
            elem: '#tableContract',
            url: "{:url('crm/contract/index_json',['customer_id'=>$data['id']])}",
            page: true,
            cols: [[
                {templet: '#time', align: 'center', sort: true, title: '合同时间',minWidth:240},
                {field: 'user_name', align: 'center', sort: true, title: '用户',},
                {templet:'#photo',align: 'center', sort: true, title: '合同照片',},
                {field: 'remark', align: 'left', sort: true, title: '合同备注'},
                {templet: '#downfile', align: 'center', sort: true, title: '下载合同'},
                {align: 'center', toolbar: '#tableEditContract', title: '操作', minWidth: 200}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                }; 
            }
        });
        
    });
</script>
<script>
    /* 点击图片放大 */
    $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
        layer.photos({photos: {data: [{src: $(this).attr('src')}]}, shade: .1, closeBtn: true});
    });

</script>      
    {foreach name="field" item="r"}
        {:get_code_value_js($r)}
    {/foreach}
{/block}